<div class="simulator-status row-fluid">
  <div class="synth-status span6">
    <div class="title">
      Lv.{{stats.level}} {{recipe.cls | translate}}
      <span ng-if="stats.specialist">&nbsp;<small>({{ 'Specialist' | translate }})</small></span>
    </div>
    <hr/>
    <table>
      <tr>
        <td class="stats-label">{{ 'PROGRESS' | translate }}&nbsp;<span ng-if="baseValues">(100% {{ 'EFFICIENCY' | translate }} = {{baseValues.progress}})</span></td>
      </tr>
      <tr>
        <td class="bar">
          <progressbar value="progressPercent"></progressbar>
        </td>
        <td class="bar-value">{{progress}} / {{recipe.difficulty}}</td>
      </tr>
      <tr>
        <td class="stats-label">{{ 'QUALITY' | translate }} &nbsp;<span ng-if="baseValues">(100% {{ 'EFFICIENCY' | translate }} = {{baseValues.quality}})</span></td>
      </tr>
      <tr>
        <td class="bar">
          <progressbar value="qualityPercent"></progressbar>
        </td>
        <td class="bar-value">{{quality}} / {{recipe.maxQuality}}</td>
      </tr>
      <tr>
        <td class="stats-label">{{ 'CP' | translate }}</td>
      </tr>
      <tr>
        <td class="bar">
          <progressbar value="cpPercent"></progressbar>
        </td>
        <td class="bar-value">{{cp}} / {{maxCp}}</td>
      </tr>
    </table>
    <hr/>
    <table>
      <tr class="narrow">
        <td>
          <span class="stats-label">{{ 'DURABILITY' | translate }}</span> {{durability}}&nbsp;/&nbsp;{{recipe.durability}}&emsp;
        </td>
        <td>
          <span class="stats-label">{{ 'HQ' | translate }}</span>&nbsp;{{hqPercent}}%&emsp;
        </td>
        <td class="align-right">
          <span class="stats-label">{{ 'RELIABILITY' | translate }}</span>&nbsp;{{successPercent | number: 0}}%
        </td>
      </tr>
    </table>
  </div>

  <div class="bonus-stats span6">
    <div class="title">
      {{ 'ATTRIBUTES' | translate}}
      <a ui-sref="crafter-attributes"><small><i class="fa fa-edit"></i></small></a>
    </div>
    <hr/>
    <form name="bonusStatsForm">
      <table>
        <tr>
          <td>
            <span class="stats-label">{{ 'FOOD' | translate }}</span><br/>
            <select class="input-fill" ng-model="bonusStats.food"
                    ng-options="buffName(buff) for buff in buffList.food track by buff.id">
              <option value="" selected="selected">{{ 'FOOD_NONE' | translate }}</option>
            </select>
          </td>
          <td>
            <span class="stats-label">{{ 'MEDICINE' | translate }}</span><br/>
            <select class="input-fill" ng-model="bonusStats.medicine"
                    ng-options="buffName(buff) for buff in buffList.medicine track by buff.id">
              <option value="" selected="selected">{{ 'MEDICINE_NONE' | translate }}</option>
            </select>
          </td>
        </tr>
      </table>
      <table>
        <tr>
          <td class="col1 stats-label">{{ 'STATS_CRAFTSMANSHIP' | translate }}</td>
          <td class="col2 value">{{baseStats.craftsmanship}}</td>
          <td class="col3 value">+&nbsp;{{buffStats.craftsmanship}}</td>
          <td class="col4">
            +&nbsp;
            <input class="input-mini" type="number" min="0" required force-numeric
                   ng-model="bonusStats.craftsmanship"/>
          </td>
          <td class="col5 value">=&nbsp;{{stats.craftsmanship}}</td>
          <td class="col6">&nbsp;</td>
        </tr>
        <tr>
          <td class="col1 stats-label">{{ 'STATS_CONTROL' | translate }}</td>
          <td class="col2 value">{{baseStats.control}}</td>
          <td class="col3 value">+&nbsp;{{buffStats.control}}</td>
          <td class="col4">
            +&nbsp;
            <input class="input-mini" type="number" min="0" required force-numeric ng-model="bonusStats.control"/>
          </td>
          <td class="col5 value">=&nbsp;{{stats.control}}</td>
          <td class="col6">&nbsp;</td>
        </tr>
        <tr>
          <td class="col1 stats-label">{{ 'STATS_CP' | translate }}</td>
          <td class="col2 value">{{baseStats.cp}}</td>
          <td class="col3 value">+&nbsp;{{buffStats.cp}}</td>
          <td class="col4">
            +&nbsp;
            <input class="input-mini" type="number" required force-numeric ng-model="bonusStats.cp"/>
          </td>
          <td class="col5 value">=&nbsp;{{stats.cp}}</td>
          <td class="col6">&nbsp;</td>
        </tr>
        <tr>
          <td class="col1 stats-label">{{ 'STATS_START_QUALITY' | translate }}</td>
          <td class="col2 value">0</td>
          <td class="col3 value">+&nbsp;0</td>
          <td class="col4">
            +&nbsp;
            <input class="input-mini" type="number" min="0" required force-numeric
                   ng-model="bonusStats.startQuality"/>
          </td>
          <td class="col5 value">=&nbsp;{{bonusStats.startQuality}}</td>
          <td class="col6">&nbsp;</td>
        </tr>
      </table>
    </form>
  </div>
</div>
